<template>
  <view class="container">
    <!-- Banner区域 -->
    <view class="banner">
      <u-swiper :list="list" mode="none" height="306"></u-swiper>
    </view>

    <!-- 公告栏 -->
     
    <view class="notice">
  <u-notice-bar mode="horizontal"  :list="lists" :bg-color="'#ffffff'" :border-radius="'20'" :color="'#292421'"></u-notice-bar>
    </view>
   
    <!-- 服务菜单 -->
    <view class="service-menu">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="$api.toPage(`/sub-home/pages/item-detail/item-detail?id=${item.id}`)">
        <view class="icons flex align-center justify-center" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #FF1712;">
          <u-icon :name="item.icon" size="56"></u-icon>
        </view>
    
        <text class="menu-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 关于我们 -->
    <view class="about-section">
      <view class="section-title">
       <text class="title-text"> 关于哈普车业</text>
      </view>
      <view class="about-content">
       <video
            :src="videoUrl"
            :poster="posterUrl"
            :autoplay="false"
            :controls="true"
            style="height: 320rpx; width: 100%;"
            :show-play-btn="true"
          ></video>
        <!-- 悬浮电话按钮 -->
        <view class="phone-btn" @click="open">
          <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/phone.png" size="56"></u-icon>
        </view>
       <u-popup v-model="showPopup" mode="bottom" @close="onClose" :border-radius="'20'">
            <view class="popup-content">
              <view class="phone-number flex justify-center align-center">129-2930-2931</view>
              <view class="popup-button flex justify-center align-center" @click="makeCall">呼叫</view>
              <view class="popup-button flex justify-center align-center" @click="cancel">取消</view>
            </view>
          </u-popup>
      </view>
    </view>
     <homeItem
          :title="'每日精选好物'"
          :product-list="productList"
          @item-click="onProductClick"
        />
        <view class="container1">
          <view class="qr-code flex justify-around align-center">
            <view class="left text-bold margin-lr" style="color: #292421;font-size: 40rpx;">
              扫码进群零红包
            </view>
            <view class="right text-sm" style="padding: 5rpx 30rpx;background-color: #F9C608;border-radius: 54rpx;color: #292421;" >
            直接抵扣现金使用哦
            </view>
          </view>
            <view class="qr-code" >
              <image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/erweima.png" mode="aspectFit"></image>
            </view>
            
           
            <view class="note">该二维码1月17日前有效，重新进入将更新</view>
          </view>
        
        
        
  </view>
  
  
</template>

<script>
export default {
  data() {
    return {
      itemId:null,
      itemTitle:null,
      showPopup: false,
      productList: [
              {
                id: 1,
                title: '[消费券直抵] 哈普红油 汽车车载洗涤虎仔',
                price: '50.00',
                sold: '492',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu1.png'
              },
              {
                id: 2,
                title: '[消费券直抵] 全车精洗',
                price: '99.00',
                sold: '968',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu2.png'
              },
              {
                id: 3,
                title: '[消费券直抵] 全车精洗',
                price: '99.00',
                sold: '968',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu2.png'
              },
              {
                id: 4,
                title: '[消费券直抵] 全车精洗',
                price: '99.00',
                sold: '968',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu2.png'
              },
              {
                id: 5,
                title: '[消费券直抵] 全车精洗',
                price: '99.00',
                sold: '968',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu2.png'
              },
              {
                id: 6,
                title: '[消费券直抵] 全车精洗',
                price: '99.00',
                sold: '968',
                image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/tu2.png'
              },
              // ... 更多商品数据
            ],
        videoUrl: 'https://xxx.com/video.mp4',
            posterUrl: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/video.png' ,
      lists:['公告：大家好！抢得消费券可在线上或门店直接抵扣使用，100元起...'],
       list: [
                {
                  image: "https://env-00jxt1fzew48.normal.cloudstatic.cn/home/top.png",
               
                },
                {
                  image: "https://env-00jxt1fzew48.normal.cloudstatic.cn/home/top.png",
              
                },
                ],
      menuList: [
        {
          id:1,
          name: '哈普洗护',
          icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner1.png'
        },
        {
          id:2,
          name: '哈普洗护',
          icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner2.png'
        },
        {
          id:3,
          name: '哈普保养',
          icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner3.png'
        },
        {
          id:4,
          name: '店铺地址',
          icon: "https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner4.png"
        }
      ]
    }
  },
  methods:{
    open(){
      this.showPopup=true
      
    } ,
     makeCall() {
          uni.makePhoneCall({
            phoneNumber: '12929302931' // 确保电话号码格式正确
          });
          this.showPopup = false; // 关闭弹出框
        },
        cancel() {
          this.showPopup = false; // 关闭弹出框
        },
        onClose() {
          this.showPopup = false; // 关闭弹出框
        
          }
      }
      
  }

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// Banner样式
.banner {
  width: 100%;
  height: 300rpx;
  overflow: hidden;
  
  .banner-image {
    width: 100%;
    border-radius: 0 0 20rpx 20rpx;
  }
}

// 公告栏样式
.notice {
  margin: 20rpx;

  display: flex;
  align-items: center;
  
  .notice-icon {
    margin-right: 10rpx;
    font-size: 32rpx;
  }
  
  .notice-text {
    font-size: 26rpx;
    color: #FF6B00;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 服务菜单样式
.service-menu {
  height: 180rpx;
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .menu-text {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #292421;
    }
  }
}

// 关于我们部分
.about-section {
  margin: 20rpx;
 
  border-radius: 20rpx;
  overflow: hidden;
  
  .section-title {
    padding: 20rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      color:#292421 ;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #FF4945;
        border-radius: 3rpx;
      }
    }
  }
  
  .about-content {
  
    
    .about-image {
      width: 100%;
      height: 400rpx;
    }
    
    .phone-btn {
      position:fixed;
      right: 30rpx;
      bottom: 500rpx;
      width: 100rpx;
      height: 100rpx;
      background-color: #FF1712;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
     z-index: 100;
      
      .phone-icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}
.container1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qr-code {
  margin-bottom: 20px;
}

.description {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.note {
  font-size: 14px;
  color: #999;
}

.popup-content {
  height: 400rpx; /* 设置总高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 确保内容均匀分布 */
  padding: 20rpx;
  text-align: center;
}
.phone-number{
  line-height: 120rpx;
  text-align: center;
}
.popup-button{
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  border-top:1rpx solid #f0f0f0;
}
</style>